import React from 'react';
import { message } from 'antd';
import Api from 'Utils/api';
import * as routerActions from 'react-router-redux';
import { connect } from 'react-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import Article from '../../Components/Article';
import { RESOURCE_HOST } from '../../../../constants/config';
import './index.scss';

class VideoDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      record: {},
    };
    this.returnVideo = ::this.returnVideo;
  }
  componentWillMount() {
    this.initData();
  }

  initData() {
    const api = new Api({
      method: 'GET',
      path: `/documents/${this.props.params.id}`,
      success: (json) => {
        this.setState({
          record: json
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  handleClose() {
    this.props.dispatch(routerActions.push('/display/video'));
  }
  returnVideo() {
    const { record } = this.state;
    const src = record.media ? `${RESOURCE_HOST}${record.media}` : '';
    return (
      <video id="videoWrap" className="video-play" controls preload autoPlay>
        <source src={src} id="video" />
      </video>
    );
  }
  render() {
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    const { record } = this.state;
    if (isVertical) {
      return (
        <Article
          title={record.title}
          createTime={record.modify_time}
          desc={
            <div>
              <div className="v-video-detail-play">
                {
                  record.media ? this.returnVideo() : ''
                }
              </div>
              <p className="v-content-p">
                {this.state.record.content ? <span dangerouslySetInnerHTML={{ __html: this.state.record.content.replace(/\n/g, '<br/>') }} /> : ''}
              </p>
            </div>
          }
        />
      );
    }
    return (
      <Article
        title={record.title}
        createTime={record.modify_time}
        desc={
          <div>
            <div className="video-detail-play">
              {
                record.media ? this.returnVideo() : ''
              }
            </div>
            <p>
              {this.state.record.content ? <span dangerouslySetInnerHTML={{ __html: this.state.record.content.replace(/\n/g, '<br/>') }} /> : ''}
            </p>
          </div>
        }
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(VideoDetail);
